<template>
  <el-row :gutter="20">

    <el-col :span="6" style="padding-left: 50px;padding-top: 50px">
      <el-card>
        <template #header>
          <div align="center">个人信息</div>
        </template>
        <div class="block" align="center">
          <el-avatar :size="50" :src="userInfoVO.avatar"/>
        </div>
        <el-divider/>

        <table class="demo-border">
          <tbody>
          <tr>
            <td class="text">
              <svg-icon icon-class="user"/>
              用户昵称:
            </td>
            <td class="text">{{ userInfoVO.nickname }}</td>
          </tr>
          <tr>
            <td class="text" style="padding-top: 10px">
              <el-icon>
                <User/>
              </el-icon>
              性&emsp;&emsp;别:
            </td>
            <td class="text">{{ userInfoVO.gender ? userInfoVO.gender == 1 ? '男' : '女' : '' }}</td>
          </tr>

          <tr>
            <td class="text" style="padding-top: 10px">
              <svg-icon icon-class="tree"/>
              部&emsp;&emsp;门:
            </td>
            <td class="text">{{ userInfoVO.deptName }}</td>
          </tr>
          <tr>
            <td class="text" style="padding-top: 10px">
              <el-icon>
                <Phone/>
              </el-icon>
              手机号码:
            </td>
            <td class="text">{{ userInfoVO.mobile }}</td>
          </tr>
          <tr>
            <td class="text" style="padding-top: 10px">
              <el-icon>
                <Box/>
              </el-icon>
              用户邮箱:
            </td>
            <td class="text">{{ userInfoVO.email }}</td>
          </tr>

          </tbody>
        </table>
      </el-card>

    </el-col>

    <el-col :span="6" :offset="2" style="padding-top: 50px">
      <el-card>
        <div slot="header" class="clearfix">
          <span>基本资料</span>
        </div>
        <el-tabs v-model="activeTab">
          <el-tab-pane label="基本资料" name="userinfoTab">
            <userInfo :userInfoVO="userInfoVO"/>
          </el-tab-pane>
          <el-tab-pane label="修改密码" name="resetPwdTab">
            <resetPwd/>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>
  </el-row>


</template>
<script setup lang="ts">
import {UserPersonInfoForm} from "@/api/user/types";
import {getUserPersonInfo} from "@/api/user";
import resetPwd from "@/views/system/user/profile/resetPwd.vue";
import userInfo from "./userInfo.vue";

defineOptions({
  name: "Profile",
  inheritAttrs: false,
});

let activeTab = ref("userinfoTab");
// 用户表单数据
const userInfoVO = reactive<UserPersonInfoForm>({});

function initUserInfo() {
  getUserPersonInfo().then(({data}) => {
    Object.assign(userInfoVO, {...data});
  });
}

onMounted(() => {
  initUserInfo();
});

</script>

<style scoped>
.demo-border .text {
  width: 15%;
}

.demo-border .line {
  width: 70%;
}

.demo-border .line div {
  width: 100%;
  height: 0;
  border-top: 1px solid var(--el-border-color);
}

.demo-border .line .dashed {
  border-top: 2px dashed var(--el-border-color);
}
</style>
